<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老君山风景区</title>
    <style>
        /*全局样式*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", "PingFang SC", sans-serif;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            line-height: 1.6;
            color: #333;
        }
        
        /*导航栏*/
        .navbar {
            padding: 15px 50px;
            background: rgba(30, 30, 30, 0.9);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        .navbar.scrolled {
            padding: 10px 50px;
            background: rgba(30, 30, 30, 0.95);
        }
        .logo {
            font-size: 1.5em;
            font-weight: bold;
            
        }
        .nav-links {
            display: flex;
            list-style: none;
        }
        .nav-links li {
            margin-left: 30px;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 1.1em;
            transition: color 0.3s;
            position: relative;
        }
        .nav-links a:hover {
            color: #ffd700;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: #ffd700;
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }
        .nav-links a:hover::after {
            width: 100%;
        }
        
        /*首页横幅*/
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                        url('./img/老君山3.jpg') center/cover;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            background-attachment: fixed;
            padding-top: 70px;
        }
        .hero-content {
            max-width: 800px;
            padding: 0 20px;
        }
        .hero h1 {
            font-size: 3.5em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .hero p {
            font-size: 1.5em;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        /* 按钮 */
        .cta-btn {
            display: inline-block;
            padding: 15px 30px;
            font-size: 1.2em;
            background: #ffd700;
            color: #333;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .cta-btn:hover {
            background: #e6c200;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* 简介部分 */
        .section {
            padding: 80px 50px;
            text-align: center;
        }
        .section h2 {
            font-size: 2.5em;
            margin-bottom: 50px;
            color: #333;
            position: relative;
            display: inline-block;
        }
        .section h2::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            background: #ffd700;
            bottom: -15px;
            left: 25%;
        }
        
        /* 简介内容 */
        .intro-content {
            max-width: 1200px;
            margin: 0 auto;
            text-align: left;
        }
        .intro-image {
            margin: 40px 0;
            text-align: center;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .intro-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s;
        }
        .intro-image:hover img {
            transform: scale(1.03);
        }
        .intro-text {
            margin-top: 40px;
        }
        .intro-text h3 {
            font-size: 1.5em;
            margin: 30px 0 15px;
            color: #444;
            position: relative;
            padding-left: 15px;
        }
        .intro-text h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 80%;
            background: #ffd700;
            border-radius: 3px;
        }
        .intro-text p {
            margin-bottom: 20px;
            line-height: 1.8;
            padding: 0 20px;
        }
        
        /* 景点和服务卡片 */
        .scenic-grid, .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        .scenic-card, .service-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .scenic-card:hover, .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        .scenic-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-bottom: 3px solid #ffd700;
        }
        .scenic-card h3, .service-card h3 {
            margin: 20px 0 15px;
            color: #333;
        }
        .scenic-card p, .service-card p {
            padding: 0 20px 20px;
            color: #666;
        }
        .service-card a {
            display: block;
            padding: 20px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s;
        }
        .service-card a:hover {
            color: #e6c200;
            background: rgba(255, 215, 0, 0.05);
        }
        
        /* 文化部分 */
        #culture {
            background: #f9f9f9;
        }
        .culture-content {
            max-width: 1000px;
            margin: 0 auto;
            text-align: left;
            padding: 0 20px;
        }
        .culture-item {
            margin-bottom: 40px;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        .culture-item h3 {
            color: #333;
            margin-bottom: 15px;
            position: relative;
            padding-left: 15px;
        }
        .culture-item h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 80%;
            background: #ffd700;
            border-radius: 3px;
        }
        
        /* 联系我们 */
        #contact {
            background: #f5f5f5;
        }
        .contact-info {
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        .contact-info p {
            margin: 15px 0;
            font-size: 1.1em;
            color: #555;
        }
        
        /* 页脚 */
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 30px;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar" id="navbar">
        <div class="logo">老君山</div>
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#intro">简介</a></li>
            <li><a href="#scenic">景点</a></li>
            <li><a href="#culture">文化</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
    
    <!-- 首页横幅 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>老君山风景区</h1>
            <p>道家圣地 · 自然奇观 · 文化瑰宝</p>
            <a href="#intro" class="cta-btn">探索更多</a>
        </div>
    </section>
    
    <!-- 简介部分 -->
    <section id="intro" class="section">
        <h2>景区简介</h2>
        <div class="intro-content">
            <div class="intro-image">
                <img src="./img/老君山8.jpg" alt="老君山全景">
            </div>
            <div class="intro-text">
                <h3>地理位置</h3>
                <p>老君山位于中国河南省洛阳市栾川县，是国家AAAAA级旅游景区，也是道教圣地之一。老君山因传说中道教创始人老子在此修炼而得名。它是一座集自然风光与道教文化于一体的名山，海拔2297米，是伏牛山主峰。</p>
                
                <h3>自然景观</h3>
                <p>老君山以其奇峰怪石、云海日出、温泉瀑布等自然景观著称。这里有数千种植物和数百种动物，是一个天然的生态宝库。特别是十里画屏、金顶道观群等景点，四季景色各异，美不胜收。</p>
                
                <h3>文化意义</h3>
                <p>老君山不仅是一个自然景观的宝地，还具有丰富的文化内涵。山上有许多道教庙宇和碑刻，体现了道教文化的悠久历史和深厚底蕴。老子文化苑、道德府等文化景点，展示了老子思想和道教文化的精髓。</p>
            </div>
        </div>
    </section>
    
    <!-- 景点介绍 -->
    <section id="scenic" class="section">
        <h2>主要景点</h2>
        <div class="scenic-grid">
            <div class="scenic-card">
                <img src="./img/老君山金顶.jpg" alt="金顶">
                <h3>金顶道观群</h3>
                <p>老君山最高峰，道教圣地，云海日出的最佳观赏点。金顶建筑群包括老君庙、道德府、五母金殿等，金光闪闪，气势恢宏。</p>
            </div>
            <div class="scenic-card">
                <img src="./img/老君山十里画屏1.jpg" alt="十里画屏">
                <h3>十里画屏</h3>
                <p>奇峰异石，宛如天然画卷，四季景色各异。这里是观赏云海、日出的绝佳位置，步行其间，如入仙境。</p>
            </div>
            <div class="scenic-card">
                <img src="./img/老君山追梦谷.jpg" alt="追梦谷">
                <h3>追梦谷</h3>
                <p>老君山的峡谷景区，原始森林茂密，瀑布溪流众多，是休闲度假、亲近自然的好去处。</p>
            </div>
        </div>
    </section>
    
    <!-- 文化部分 -->
    <section id="culture" class="section">
        <h2>道教文化</h2>
        <div class="culture-content">
            <div class="culture-item">
                <h3>老子文化</h3>
                <p>老君山是道教始祖老子归隐修炼之地，山中的老子文化苑展示了老子的一生和思想精髓，是了解道教文化的重要场所。</p>
            </div>
            <div class="culture-item">
                <h3>道教建筑</h3>
                <p>老君山上的道教建筑群始建于北魏，历经唐、宋、明、清等朝代扩建，形成了规模宏大的道教建筑群，具有极高的历史和艺术价值。</p>
            </div>
            <div class="culture-item">
                <h3>道教活动</h3>
                <p>老君山每年举办多次道教文化活动，如老子诞辰纪念、道教音乐会等，吸引了众多信众和游客参与。</p>
            </div>
        </div>
    </section>
    
    <!-- 服务信息 -->
    <section id="services" class="section">
        <h2>旅游服务</h2>
        <div class="services-grid">
            <div class="service-card">
                <a href="#">
                    <h3>交通指南</h3>
                    <p>如何到达老君山，包括自驾路线、公共交通等信息。</p>
                </a>
            </div>
            <div class="service-card">
                <a href="#">
                    <h3>住宿推荐</h3>
                    <p>周边酒店和民宿推荐，满足不同预算和需求的住宿选择。</p>
                </a>
            </div>
            <div class="service-card">
                <a href="#">
                    <h3>餐饮推荐</h3>
                    <p>当地特色美食和餐馆推荐，品尝地道豫菜和山珍美味。</p>
                </a>
            </div>
            <div class="service-card">
                <a href="#">
                    <h3>旅游攻略</h3>
                    <p>最佳旅游时间、游览路线、注意事项等实用信息。</p>
                </a>
            </div>
        </div>
    </section>
    
    <!-- 联系我们 -->
    <section id="contact" class="section">
        <h2>联系我们</h2>
        <div class="contact-info">
            <p><strong>地址：</strong>河南省洛阳市栾川县七里坪村21组</p>
            <p><strong>电话：</strong>0379-66838888</p>
            <p><strong>邮箱：</strong>info@laojunshan.com</p>
            <p><strong>开放时间：</strong>全年开放 08:00-18:00</p>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer>
        <p>© 2025 老君山风景区 版权所有</p>
        <br>
        <p>© 2025 软件工程张诗佳 版权所有 | 2410250403</p>
    </footer>
    
    
</body>
</html>